<script setup>
import { ref, onMounted } from 'vue'
import pageContainer from '@/components/pageContainer.vue'
import {
  sceneryTotalService,
  hotelTotalService,
  restaurantTotalService,
  postTotalService
} from '@/apis/home'
import { useTransition } from '@vueuse/core'

// 控制子组件内content模块的显示
const shouldShowContent = ref(true)

// 控制loading加载的开启和关闭
const isLoading = ref(false)

// 柱状图
import BarChart from '@/views/Home/components/BarChart.vue'

// 饼图
import PieChart from '@/views/Home/components/PieChart.vue'

// 折线图
import LineChart from '@/views/Home/components/LineChart.vue'

// 景点总数
const sceneryCount = ref(0)
// 餐厅总数
const hotelCount = ref(0)
// 酒店总数
const restaurantCount = ref(0)
// 攻略总数
const postCount = ref(0)

// 实现数字快速累加效果
const sceneryValue = useTransition(sceneryCount, {
  duration: 1500
})
const hotelValue = useTransition(hotelCount, {
  duration: 1500
})
const restaurantValue = useTransition(restaurantCount, {
  duration: 1500
})
const postValue = useTransition(postCount, {
  duration: 1500
})

// 获取景点总数
const getSceneryCount = async () => {
  const res = await sceneryTotalService()
  sceneryCount.value = res.data
}
// 获取酒店总数
const getHotelCount = async () => {
  const res = await hotelTotalService()
  hotelCount.value = res.data
}
// 获取餐厅总数
const getRestaurantCount = async () => {
  const res = await restaurantTotalService()
  restaurantCount.value = res.data
}
// 获取攻略总数
const getPostCount = async () => {
  const res = await postTotalService()
  postCount.value = res.data
}

onMounted(async () => {
  isLoading.value = true
  await Promise.all([
    getSceneryCount(),
    getHotelCount(),
    getRestaurantCount(),
    getPostCount()
  ])
  isLoading.value = false
})
</script>

<template>
  <div
    class="container"
    v-loading="isLoading"
    element-loading-text="Loading..."
  >
    <div class="count">
      <pageContainer title="景点总数" :showContent="shouldShowContent">
        <template #icon>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-lvyou"></use>
          </svg>
        </template>

        <template #label>
          <el-statistic title="当前景点总数" :value="sceneryValue" />
        </template>
      </pageContainer>

      <pageContainer title="酒店总数" :showContent="shouldShowContent">
        <template #icon>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-jiudian"></use>
          </svg>
        </template>

        <template #label>
          <el-statistic title="当前酒店总数" :value="hotelValue" />
        </template>
      </pageContainer>

      <pageContainer title="餐厅总数" :showContent="shouldShowContent">
        <template #icon>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-cantingcaipin"></use>
          </svg>
        </template>

        <template #label>
          <el-statistic title="当前餐厅总数" :value="restaurantValue" />
        </template>
      </pageContainer>

      <pageContainer title="攻略总数" :showContent="shouldShowContent">
        <template #icon>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-gonglve_"></use>
          </svg>
        </template>

        <template #label>
          <el-statistic title="当前餐厅总数" :value="postValue" />
        </template>
      </pageContainer>
    </div>

    <div class="barchart">
      <div class="scenery">
        <pageContainer title="景点类型柱状图">
          <BarChart type="景点"></BarChart>
        </pageContainer>
      </div>

      <div class="hotel">
        <pageContainer title="酒店类型柱状图">
          <BarChart type="酒店"></BarChart>
        </pageContainer>
      </div>

      <div class="restaurant">
        <pageContainer title="餐厅类型柱状图">
          <BarChart type="餐厅"></BarChart>
        </pageContainer>
      </div>
    </div>

    <div class="linechart">
      <pageContainer title="城市间景点、酒店、餐厅平均价格折线图">
        <LineChart></LineChart>
      </pageContainer>
    </div>

    <div class="piechart">
      <pageContainer title="景点等级分布饼图">
        <PieChart type="景点"></PieChart>
      </pageContainer>

      <pageContainer title="酒店等级分布饼图">
        <PieChart type="酒店"></PieChart>
      </pageContainer>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;

  .count {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;

    ::v-deep .el-statistic__head {
      font-size: 15px;
    }

    ::v-deep .el-statistic__content {
      text-align: center;
      font-size: 35px;
      font-weight: bold;
    }
  }

  .barchart {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
  }

  .linechart {
    margin-bottom: 20px;
  }

  .piechart {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}
</style>
